<template>
  <div class="cusha">
    <el-tooltip :open-delay="1000" placement="right">
      <div slot="content">
        <span class="content_title">设备编号：</span>
        {{ id }}
        <br />
        <span class="content_title">设备状态：</span>
        {{ getHeadName(data.stateCode) }}
        <br />
        <span class="content_title">设备效率：</span>
        {{ xiaolv }}%
        <br />
        <span class="content_title">生产品种：</span>
        {{ data.pz }}
        <br />
        <span class="content_title">更新时间：{{ data.time }}</span>
      </div>

      <svg
        width="52px"
        height="17px"
        viewBox="0 0 52 17"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <defs>
          <pattern id="jhttcs" width="12" height="15">
            <image xlink:href="~@/assets/img/status/status6-cs.png" />
          </pattern>
        </defs>
        <defs>
          <pattern id="jhttbt" width="15" height="15">
            <image xlink:href="~@/assets/img/status/status6-bt.png" />
          </pattern>
        </defs>
        <defs>
          <pattern id="jhttqh" width="15" height="15">
            <image xlink:href="~@/assets/img/status/status6-qh.png" />
          </pattern>
        </defs>
        <g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="首页" transform="translate(-1364.000000, -206.000000)">
            <g id="编组-24" transform="translate(1365.000000, 207.000000)">
              <path
                d="M7,0 L50,0 L50,0 L50,15 L7,15 C6.44771525,15 6,14.5522847 6,14 L6,1 C6,0.44771525 6.44771525,1.01453063e-16 7,0 Z"
                id="矩形备份-7"
                stroke="#7BCFFF"
                :style="bodyStyle"
                transform="translate(28.000000, 7.500000) scale(-1, -1) translate(-28.000000, -7.500000) "
              ></path>
              <path
                d="M1,0 L12,0 L12,0 L12,15 L1,15 C0.44771525,15 6.76353751e-17,14.5522847 0,14 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z"
                id="矩形备份-6"
                stroke="#7BCFFF"
                :style="headStyle"
              ></path>
              <text
                id="2"
                font-family="PingFang-SC-Medium, PingFang SC"
                font-size="10"
                font-weight="400"
                line-spacing="10"
                fill="#FFFFFF"
              >
                <tspan v-if="inline" x="15" y="11">{{ id }}</tspan>
                <tspan v-else x="28" y="13">{{ id }}</tspan>
              </text>
              <text
                v-if="inline"
                id="效率"
                font-family="PingFang-SC-Medium, PingFang SC"
                font-size="10"
                font-weight="400"
                line-spacing="10"
                fill="#FFF"
                transform="translate(48,10) scale(0.7)"
                text-anchor="end"
              >
                {{ xiaolv + "%" }}
              </text>
            </g>
          </g>
        </g>
      </svg>
    </el-tooltip>
  </div>
</template>

<script>
import { mul } from "@/utils/caculate";
export default {
  name: "cusha",
  props: {
    data: Object,
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headStyle: {
        fill: ""
      },
      bodyStyle: {
        fill: ""
      },
      id: "",
      xiaolv: "",
      pz: ""
    };
  },
  watch: {
    data: {
      deep: true, //true 深度监听
      immediate: true,
      handler() {
        this.draw();
      }
    }
  },

  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      this.headStyle.fill = this.getHeadColor(this.data.stateCode);
      this.bodyStyle.fill = this.getBodyColor(this.data.xiaolv);
      this.id = this.data.devSn;
      this.xiaolv = mul(this.data.xiaolv, 100);
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return "#02DE6D";
        //停止
        case 2:
          return "#FF3C00";
        //故障
        case 3:
          return "#FF9902";
        //满纱满桶
        case 4:
          return "#00D8D3";
        //通讯失败
        case 5:
          return "#B8B8B8";
        // 计划停台
        case 6:
          return "url(#jhttcs)";
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadName(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return "运行";
        //停止
        case 2:
          return "停止";
        //故障
        case 3:
          return "故障";
        //满纱满桶
        case 4:
          return "满纱满桶";
        //通讯失败
        case 5:
          return "通讯失败";
        //计划停台
        case 6:
          return "计划停台";
      }
    },
    //车身颜色渐变表示车台当前效率范围
    getBodyColor(stateCode1) {
      let stateCode = Number(stateCode1) * 100;
      if (stateCode >= 90) {
        return "#006BCE";
      } else if (90 > stateCode && stateCode >= 80) {
        return "#8D6F00";
      } else if (80 > stateCode && stateCode > 70) {
        return "#7F6D6A";
      } else if (stateCode <= 70) {
        return "#8214C3";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cls-1,
.cls-3 {
  stroke: #82c4fa;
  stroke-width: 2px;
}

.cls-1 {
  fill: url(#linear-gradient);
}

.cls-2 {
  font-size: 40px;
  fill: #fff;
  font-family: "Microsoft YaHei";
  font-weight: 700;
}

.cls-3 {
  fill: #519aff;
}
</style>
